<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="批次号:" prop="batch">
                    <el-input v-model="form.batch" placeholder="请输入批次号" disabled clearable />
                </el-form-item>
                <!-- <el-form-item label="申请人:" prop="admin_id">
                    <el-input-number v-model="form.admin_id" :step="1" :min="0"></el-input-number>
                </el-form-item> -->
                <el-form-item label="内衣编号:" prop="brand">
                    <el-input v-model="form.brand" placeholder="请输入内衣编号" disabled clearable />
                </el-form-item>
                <!-- <el-form-item label="补货数量:" prop="rep_num">
                    <el-input v-model="form.rep_num" placeholder="请输入补货数量" disabled clearable />
                </el-form-item> -->
                <!-- <el-form-item label="订单号:" prop="order_num">
                    <el-input v-model="form.order_num" placeholder="请输入订单号" disabled clearable />
                </el-form-item> -->
                <!-- <el-form-item label="备注:" prop="content">
                    <el-input v-model="form.content" placeholder="请输入备注" clearable />
                </el-form-item> -->
                <el-form-item label="申请时间:" prop="apply_time">
                    <el-date-picker v-model="form.apply_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择申请时间" disabled />
                </el-form-item>        
                <!-- <el-form-item label="待审id:" prop="output_id">
                    <el-input-number v-model="form.output_id" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="待审详情id:" prop="output_detailid">
                    <el-input-number v-model="form.output_detailid" :step="1" :min="0"></el-input-number>
                </el-form-item> -->

                <template>
                    <div>
                        <el-table 
                        :data="list" 
                        border
                        show-summary
                        :summary-method="getSummaries"
                        style="width: 100%"
                        highlight-current-row ref="mytb">
                            <el-table-column v-for="(item, index) in purchase" :key="index" :label="item" property="test" align="center">
                                <template slot-scope="{ row }">
                                <span>{{ row[index] }}</span>

                                <el-select v-if="item == '颜色'" v-model="row[index]" placeholder="请选择">
                                    <el-option
                                    v-for="item1 in colors"
                                    :key="item1.id"
                                    :label="item1.value"
                                    :value="item1.value">
                                    </el-option>
                                </el-select>
                                
                                <el-input v-if="item == '统计'" v-model="row[index]" disabled></el-input>

                                <el-input v-if="item !== '颜色' && item !== '状态' && item !== '统计'" @blur="blurs" v-model="row[index]"></el-input>
                                </template>    
                            </el-table-column>
                        </el-table>
                    </div>
                </template>
                <el-form-item>
                    <el-button @click="ok" type="success">统计</el-button>
                </el-form-item>
                <el-form-item label="审核状态:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择审核状态" clearable>
                        <el-option v-for="(item, index) in audit_list" :key="index" :label="item.value" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:" prop="content">
                    <el-input v-model="form.content" placeholder="请输入备注" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            colors: [],
            list: [],
            purchase: [],
            sums_count: 0,
            color_i: 0,
            // 编辑表单验证规则
            rules: {
            },
            form: {  },
            audit_list:[],
            fullscreenLoading: false
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    if(nval.id > 0){
                        this.edit_purchase_apply(nval.id)
                    }
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        ok() {
            this.$refs.mytb.setCurrentRow();
        },
        blurs() {
            // this.getSummaries();
            // this.$refs.mytb.setCurrentRow();
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            const sums2 = [];
            let length2 = 0;
            if(this.list[0] !== undefined){
                length2 = this.list[0].length;
                length2 = length2-1;
            }
            if(length2 !== 0){
                sums[length2] = 0;
                for(let i =0;i<data.length;i++){
                    for(let v =0;v<data[i].length-1;v++){
                        if(data[i] !== undefined){
                            if(v == 0){
                                sums[v] = '统计';
                            }else{
                                if(sums[v] == undefined){
                                    if(!isNaN(Number(data[i][v]))){
                                        sums[v] = Number(data[i][v]);
                                        sums[length2] = Number(sums[length2]) + Number(data[i][v]) 
                                    }else{
                                        sums[v] = 0;
                                        sums[length2] = 0;
                                    }
                                }else{
                                    if(!isNaN(Number(data[i][v]))){
                                        sums[v] = Number(sums[v])  + Number(data[i][v]);
                                        sums[length2] = Number(sums[length2]) + Number(data[i][v])
                                    }else{
                                        sums[v] = Number(sums[v]);
                                        sums[length2] = Number(sums[v]);
                                    }
                                }
                            }
                            if(sums2[i] == undefined){
                                if(!isNaN(Number(data[i][v]))){
                                    sums2[i] = Number(data[i][v]);
                                }else{
                                    sums2[i] = 0;
                                }
                            }else{
                                if(!isNaN(Number(data[i][v]))){
                                    sums2[i] = Number(sums2[i])  + Number(data[i][v]);
                                }else{
                                    sums2[i] = Number(sums2[i]);
                                }
                            }

                        }
                    }
                }
                for(let i =0;i<data.length;i++){
                    if(!isNaN(Number(sums2[i]))){
                        this.list[i][length2] = Number(sums2[i]);
                    }
                }
            }
            this.sums_count = sums[length2];
            sums[0] = '统计('+this.sums_count+')';
            return sums;
        },
        edit_purchase_apply(id){
                this.request
                    .post('/admin/output/edit_purchase_apply', { 
                        id:id,
                    })
                    .then(response => {
                        let new_purchase = [];
                        let new_list = [];
                        for(let i =0;i<response.table_header.length;i++){
                            if(response.table_header[i] == 'batch'){
                                // this.batchx = i;
                                new_purchase[i] =  '批次号'
                            }else if(response.table_header[i] == 'status'){
                                new_purchase[i] =  '审核状态'
                            }else if(response.table_header[i] == 'admin_id'){
                                new_purchase[i] =  '申请人'
                            }else if(response.table_header[i] == 'color'){
                                this.color_i = i;
                                new_purchase[i] =  '颜色'
                            }else if(response.table_header[i] == 'create_time'){
                                this.create_timex = i;
                                new_purchase[i] =  'create_time'
                            }else if(response.table_header[i] == 'color_sum'){
                                this.create_timex = i;
                                new_purchase[i] =  '统计'
                            }else{
                                new_purchase[i] =  response.table_header[i]
                            }
                        }
                        this.colors = response.options.color_list
                        this.audit_list = response.options.audit_list
                        for(let ic =0;ic<response.list.length;ic++){
                            response.list[ic][this.color_i] = this.transformation_color2(response.list[ic][this.color_i]);
                        }
                        this.list = response.list
                        this.purchase = new_purchase
                    })
                    .finally(() => {
                    })
        },
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.fullscreenLoading = true;
            this.$refs.mytb.setCurrentRow();
            let list2 = this.list
            for(let i =0;i<list2.length;i++){
                list2[i][this.color_i] = this.transformation_color(list2[i][this.color_i]);
            }
            this.form.sku = list2;
            this.form.output_id = this.get_id;
            this.form.rep_num = this.sums_count;

            this.request.post('/admin/output/edit_purchase_apply', { 
                ...this.form
            }).then(response => {
                this.$emit('submitForm', this.form)
                this.fullscreenLoading = false;
            })
        },
        transformation_color(row){
            let rows = 0;
            for(let i =0;i<this.colors.length;i++){
                if(this.colors[i].value == row){
                    rows = this.colors[i].id
                }
            }
            return rows;
        },
        transformation_color2(row){
            let rows = 0;
            for(let i =0;i<this.colors.length;i++){
                if(this.colors[i].id == row){
                    rows = this.colors[i].value
                }
            }
            return rows;
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>

<style lang="scss" scoped>
.el-table {
    // 默认情况下，即没有选中某一行时，只显示span
    span {
        display: block;
    }
    .el-input {
        display: none;
    }
    .el-select {
        display: none;
    }
  // 当点击某一行时，对应的行会添加current-row类，则内部的新的样式会生效
    .current-row {
        span {
        display: none;
        }
        .el-input {
            display: block;
        }
        .el-select {
            display: block;
        }
    }
}
</style>